<template>
  <div id="detailrightB" :class="!show ? 'active' : ''">
    <div @click="show = false" class="close"></div>
    <img v-show="!show" @click="show = true" class="open" src="@/assets/img/housedetail/img11.png" alt="" />
    <router-link to="/index"><img class="gone" src="@/assets/img/housedetail/img04.png" alt="" /></router-link>
    <menubox @handelClick="handelClick" />
    <div id="content" class="content">
      <a-tabs default-active-key="1" v-model="activeKey" @change="visible = false">
        <a-tab-pane key="1" tab="小额工程分布">
          <div class="fb box">
            <img src="@/assets/img/businessdetail/img11.png" alt="" />
            <div class="number">
              <div class="title fs">
                <span>拱墅区房小额工程总数/个</span>
                <!-- <span class="unit">单位:元/平方米</span> -->
              </div>
              <scrollNum :change="true" FontSize="0.28rem" Width="0.24rem" Height="0.3rem" count="000,001,617" />
            </div>
          </div>
          <div class="title fb mt24">
            <span>拱墅区各街道工程分布统计</span>
            <!-- <span class="unit">单位:元/平方米</span> -->
          </div>
          <div class="item-box">
            <div v-for="(item, index) in supplyData" :key="index" class="item fb">
              <div style="cursor:pointer" class="fs" @click="changeStreetLine(item, 15)">
                <div v-if="index == 0" class="bgimg01">{{ index + 1 }}</div>
                <div v-else-if="index == 1" class="bgimg02">
                  {{ index + 1 }}
                </div>
                <div v-else-if="index == 2" class="bgimg03">
                  {{ index + 1 }}
                </div>
                <div v-else class="bgimg04">{{ index + 1 }}</div>
                <span class="text">{{ item.name }}</span>
              </div>
              <div class="money" :style="{
                  width:
                    (1.88 * Number(item.money)) / Number(supplyData[0].money) +
                    'rem',
                }">
                {{ item.money }} <span>个</span>
              </div>
            </div>
          </div>
        </a-tab-pane>

        <a-tab-pane key="2" tab="中标人分析">
          <div class="unit WHO mt10">*价格单位:万元</div>
          <a-table class="table mt6" :scroll="{ y: clientHeight - 270 + 'px' }" :pagination="false" :columns="columns"
            :rowKey="(record) => record.id" :data-source="tableData">
            <div @click="nameClick(record)" slot="name" slot-scope="text, record">
              {{ text }}
            </div>
            <div class="CS" slot="price" slot-scope="text, record">
              {{ text }}
            </div>
            <div class="QS" slot="unitPrice" slot-scope="text, record">
              {{ text }}
            </div>
          </a-table>
        </a-tab-pane>

        <a-tab-pane key="3" tab="投标单位分析">
          <a-table class="table" :scroll="{ y: clientHeight - 270 + 'px' }" :pagination="false" :columns="columns2"
            :rowKey="(record) => record.id" :data-source="tableData">
            <div class="table-num" slot="name" slot-scope="text, record, index">
              {{ index }}
            </div>
            <div @click="relativesClick(index)" class="QS" slot="units" slot-scope="text, record, index">
              {{ index }}
            </div>
            <div class="CS" slot="id" slot-scope="text, record">
              {{ text }}
            </div>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </div>
    <!-- 弹框 -->
    <div v-show="visible" class="model">
      <i @click.self="visible = false" class="iconfont icon-close"></i>
      <div class="item">
        1、阳光老人家”（康桥街道康运社区）标识设计制作安装项目
      </div>
      <div class="item">
        2、园中河(西塘河—余杭区界)综合整治工程-景观工程监理
      </div>
      <div class="item">3、2018年康桥街道安全生产服务外包项目</div>
      <div class="item">
        4、康桥村文化中心室外电梯、办公楼装修及其他零星工程
      </div>
      <div class="item">5、康桥平安桥股份经济合作社2018年度老年人旅游项目</div>
    </div>
  </div>
</template>

<script>
import menubox from "@/components/detail/menubox";
import scrollNum from "@/components/scrollNum";
import { post, get } from "@/utils/axios";
import { houseDetail } from "@/assets/json/houseDetail";
import { supplyData } from "@/assets/json/supplyData";

export default {
  name: "detailrightB",
  components: {
    scrollNum,
    menubox
  },
  props: {
    activeName: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      clientHeight: window.innerHeight || document.body.clientHeight,
      // offsetHeight: document.getElementById("content").offsetHeight,
      activeKey: "1",
      timer: null,
      show: true,
      activeIndex: 0,
      visible: false,
      supplyData: [], //街道
      name: "",
      columns: [
        {
          title: "项目名称",
          dataIndex: "name",
          key: "name",
          width: "30%",
          scopedSlots: { customRender: "name" }
        },
        {
          title: "招标人",
          dataIndex: "lessee",
          key: "lessee",
          width: "23%"
        },
        {
          title: "中标单位",
          dataIndex: "units",
          key: "units",
          width: "23%"
        },
        {
          title: "中标价格",
          dataIndex: "price",
          key: "price",
          align: "center",
          scopedSlots: { customRender: "price" }
        },
        {
          title: "招标价格",
          dataIndex: "unitPrice",
          key: "unitPrice",
          align: "center",
          scopedSlots: { customRender: "unitPrice" }
        }
      ],
      columns2: [
        {
          title: "序号",
          dataIndex: "name",
          key: "name",
          // align: "center",
          scopedSlots: { customRender: "name" }
        },
        {
          title: "招标单位",
          dataIndex: "lessee",
          key: "lessee",
          width: "40%"
        },
        {
          title: "参与招标数/次",
          dataIndex: "units",
          key: "units",
          align: "center",
          width: "17%",
          scopedSlots: { customRender: "units" }
        },
        {
          title: "中标次数/次",
          dataIndex: "id",
          key: "id",
          align: "center",
          scopedSlots: { customRender: "id" }
        }
      ],
      houseDetail: [], //所有小区
      tableData: [] //当前街道小区
    };
  },
  computed: {
    clickname() {
      return this.activeName * 0.3 + "rem";
    }
  },
  created() {},
  mounted() {
    
    window.onresize = () => {
      this.clientHeight = window.innerHeight || document.body.clientHeight;
    };

    function sortBy(props) {
      return function(a, b) {
        return b[props] - a[props];
      };
    }
    this.supplyData = supplyData.sort(sortBy("money"));

    this.tableData = houseDetail;
  },
  destroyed() {
    // this.timer = null;
  },

  methods: {
    changeStreetLine(obj, zoom) {
      obj.zoom = zoom;
      this.$emit("changeStreetLine", obj);
    },
    //定位
    changeStreetMap(obj, zoom) {
      obj.zoom = zoom;
      this.$emit("changMapCenter", obj);
    },

    //点击表格相关
    nameClick(record, index) {
      record.zoom = 18;
      this.$emit("changMapCenter", record);
      // return {
      //   on: {
      //     click: () => {
      //       console.log(record, index);
      //       this.visible = true;
      //       this.name = record.name;
      //       this.$emit("changMapCenter", record);
      //     }
      //   }
      // };
    },
    relativesClick(index) {
      this.visible = true;
      console.log(index);
    },
    //点击mark联动左侧表格数据
    fatherClick(item, setzoom) {
      this.activeKey = "2";
      // this.changeStreet(item, setzoom);
    },
    handelClick() {
      console.log("对比分析");
    }
  }
};
</script>
<style lang="scss">
#detailrightB {
  .ant-tabs-nav-container {
    overflow: visible;
  }
  .ant-tabs-bar {
    border-bottom: none;
    margin-bottom: 0.2rem;
  }
  .ant-tabs {
    color: #fff;
    font-size: 0.12rem;
    // overflow: visible;
  }
  .ant-tabs-nav .ant-tabs-tab {
    padding: 0;
    line-height: 0.24rem;
  }
  .ant-tabs-nav-scroll {
    border: none;
    background: url(../../assets/img/businessdetail/img07.png) center no-repeat;
    background-size: contain;
  }
  .ant-tabs-nav .ant-tabs-tab {
    color: #fff;
  }
  .ant-tabs-nav .ant-tabs-tab-active {
    color: $QS;
    position: relative;
    &:after {
      content: "";
      width: 0.3rem;
      height: 1px;
      background-image: linear-gradient(
          90deg,
          rgba(30, 134, 253, 0.5) 0%,
          rgba(30, 134, 253, 0.51) 1%,
          rgba(4, 233, 239, 0.75) 49%,
          $BL 100%
        ),
        linear-gradient(#1f86fc, #1f86fc);
      background-blend-mode: normal, normal;
      border-radius: 0.08rem;
      position: absolute;
      left: 50%;
      bottom: 0%;
      transform: translate(-50%, 0%);
    }
  }
  .ant-tabs-top .ant-tabs-ink-bar-animated,
  .ant-tabs-bottom .ant-tabs-ink-bar-animated {
    display: none !important;
  }
}
</style>
<style lang="scss" scoped>
#detailrightB {
  width: 5.78rem;
  transition: all 0.2s;
  height: 100vh;
  padding: 1.5rem 0.2rem 0 0.7rem;
  box-sizing: border-box;
  background: url(../../assets/img/businessdetail/img08.png) center no-repeat;
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  &.active {
    width: 0;
    padding: 0;
  }

  .close {
    cursor: pointer;
    width: 0.6rem;
    height: 6rem;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    left: 0.1rem;
  }

  .open {
    cursor: pointer;
    width: 0.33rem;
    position: fixed;
    transform: translateY(-50%);
    top: 50%;
    right: 0rem;
    z-index: 9998;
  }
  .gone {
    cursor: pointer;
    width: 0.64rem;
    height: 0.64rem;
    position: fixed;
    top: 0.24rem;
    right: 0.28rem;
  }
  .content {
    .title {
      text-align: left;
      line-height: 0.18rem;
      font-size: 0.14rem;
      background-color: #0d2d50;
      color: $QS;
      margin-bottom: 0.2rem;
      .unit {
        margin-left: 0.2rem;
        color: #fff;
        font-size: 0.12rem;
      }
    }
    .box {
      align-items: flex-end;
      img {
        margin-right: 0.3rem;
        width: 0.85rem;
      }
    }
    .number {
      text-align: left;
      .title {
        display: inline-block;
      }
    }
    .item-box .item {
      margin-top: 0.2rem;
      img {
        width: 0.3rem;
      }
      .text {
        color: #fff;
        margin-left: 0.2rem;
      }
      .money {
        padding-right: 0.04rem;
        text-align: right;
        color: $QS;
        font-family: "electronicFont";
        line-height: 0.18rem;
        background-image: linear-gradient(
            90deg,
            rgba(9, 192, 245, 0.6) 0%,
            #0c2c4f 100%
          ),
          linear-gradient(#000000, #000000);
        background-blend-mode: normal, normal;
        span {
          font-size: 0.12rem;
          color: #0975a2;
        }
      }
    }
  }
  .table {
    padding-bottom: 0.6rem;
  }
  .QS {
    position: relative;
    .triangle::after {
      right: 1.4rem;
      top: -0.2rem;
    }
    // .model {
    //   padding: 0.24rem 0.1rem;
    //   background-image: linear-gradient(#0b1f60, #0b1f60),
    //     linear-gradient(#023168, #023168);
    //   background-blend-mode: normal, normal;
    //   border-radius: 0.04rem;
    //   width: 3.5rem;
    //   text-align: left;
    //   position: absolute;
    //   right: -1.1rem;
    //   top: 0.4rem;
    //   z-index: 999999;

    //   .icon-close {
    //     cursor: pointer;
    //     font-size: 0.12rem;
    //     color: $WHO;
    //     position: absolute;
    //     right: 0.1rem;
    //     top: 0.06rem;
    //   }
    //   .item {
    //     line-height: 0.28rem;
    //     font-size: 0.12rem;
    //   }
    // }
  }
  .model {
    padding: 0.24rem 0.1rem;
    background-image: linear-gradient(#0b1f60, #0b1f60),
      linear-gradient(#023168, #023168);
    background-blend-mode: normal, normal;
    border-radius: 0.04rem;
    width: 3.5rem;
    text-align: left;
    position: absolute;
    right: 0.3rem;
    bottom: 0.6rem;
    z-index: 999999;

    .icon-close {
      cursor: pointer;
      font-size: 0.12rem;
      color: $WHO;
      position: absolute;
      right: 0.1rem;
      top: 0.06rem;
    }
    .item {
      line-height: 0.28rem;
      font-size: 0.12rem;
    }
  }
}
</style>
